/**
 * 博客登录后首页
 * @module views
 * @export {Home}
*/

import React, { useState } from 'react'
import { Layout, Menu, Breadcrumb } from 'antd'
import { useNavigate, Outlet } from 'react-router-dom'
import { PlusSquareOutlined, DesktopOutlined, ReadOutlined, CommentOutlined, UnorderedListOutlined } from '@ant-design/icons'
import 'antd/dist/antd.css'
import style from './index.module.css'

const { Header, Content, Footer, Sider } = Layout
const { SubMenu } = Menu

export const Home = () => {

  const navigate = useNavigate()
  // 侧边栏状态（是否展开）
  const [collapsed, setCollapsed] = useState(false)
  // 点击改变侧边栏状态(展开||收起)
  const onCollapse = newCollapsed => {
    setCollapsed(newCollapsed)
  }

  // 文章管理前往添加文章页或文章列表页
  const handleClickArticle = e => {
    // console.log(e, 'eeeeeeeee')
    if (e.key === 'addArticle') {
      navigate('/addArticle')
    } else if (e.key === 'articleList') {
      navigate('/articleList')
    }
  }

  return (
    <>
      <Layout>
        <Sider
          collapsible={true}
          collapsed={collapsed}
          onCollapse={onCollapse}
        >
          <div className={style.logo} />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1">
              <DesktopOutlined />
              <span>工作台</span>
            </Menu.Item>
            <SubMenu
              key="sub1"
              onClick={handleClickArticle}
              title={
                <span>
                  <ReadOutlined />
                  <span>文章管理</span>
                </span>
              }
            >
              <Menu.Item key="addArticle">
                <PlusSquareOutlined />
                <span>添加文章</span>
              </Menu.Item>
              <Menu.Item key="articleList">
                <UnorderedListOutlined />
                <span>文章列表</span>
              </Menu.Item>
            </SubMenu>
            <Menu.Item key="9">
              <CommentOutlined />
              <span>留言管理</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Content className={style.content_layout_home}>
            <Breadcrumb className={style.breadcrumb_content_home}>
              <Breadcrumb.Item>后台管理</Breadcrumb.Item>
              <Breadcrumb.Item>工作台</Breadcrumb.Item>
            </Breadcrumb>
            <div style={{ padding: 12, background: '#fff', minHeight: 360 }}>
              <span> 博客工作台</span>
              <br />
              <br />
              <Outlet />
            </div>
          </Content>
        </Layout>
        {/* <Footer className={style.footer_layout_home}>Huajiya.com</Footer> */}
      </Layout>
    </>
  )
}